<template>
  <div class="box wrapper">
    <img src="@/assets/logo.png">
    <div class="search">
      <input type="search" placeholder="搜索商品 / 店铺">
      <i class="el-icon-search"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "LogoSearch"
}
</script>

<style scoped lang='less'>
.box{
  margin: 60px auto;
  img{
    border-radius: 35%;
    width: 70px;

    display: inline-block;
  }

  .search{
    margin-top: 8px;
    margin-left: 30px;

    display: inline-block;
    vertical-align: top;
    width: 700px;
    background-color: white;

    border-radius: 40px;

    input{
      margin-left: 30px;
      padding-right: 10px;

      outline: none;
      border: 0;
      border-right: #e8e5e5 2px solid;
      width: 600px;
      height: 50px;

      overflow: hidden;

      text-indent: 1em;
      font-size: 17px;
      color: darkgray;
    }

    i{
      padding-left: 14px;
      font-size: 30px;
      vertical-align: top;
      margin-top: 10px;

      cursor: pointer;

      &:hover{
        transform: scale(1.1);
      }
    }
  }
}
</style>
